<template>
    <view :class="$style.page">
        <view :class="$style.wait">
            <view :class="$style.wrap">
                <view :class="$style.twinkle">
                    <view :class="$style.spot + ' ' + (current==0 ? $style.current : '' )" style='background:#428cf6;'></view>
                    <view :class="$style.spot + ' ' + (current==1 ? $style.current : '' )" style='background:#f14239;'></view>
                    <view :class="$style.spot + ' ' + (current==2 ? $style.current : '' )" style='background:#ffbd00;'></view>
                    <view :class="$style.spot + ' ' + (current==3 ? $style.current : '' )" style='background:#31ad52;'></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'
    import { onUnmounted } from 'vue';

    const current = ref(0)

    const t = setInterval(() => {
        if (current.value >= 3) {
            current.value = 0
        } else {
            current.value ++
        }
    }, 500)

    onUnmounted(() => {
        clearInterval(t)
    })

</script>

<style lang="scss" module>
    .page{
        position: fixed;
        width: 100vw;
        height: 100vh;
        z-index: 101;
        background-color: #fff;
        left: 0;
        top: 0;
    }



    .wait{
        height: 100%;
        width: 100%;
        position: relative;

        .wrap{
            position: absolute;
            left: 50%;
            width: 100%;
            top: 50%;
            transform: translate3d(-50%, -50%, 0);
        }

        .defaultResult{
            text-align: center;
            font-size: 32px;
        }

        .twinkle{
            font-size: 0;
            text-align: center;

            .spot{
                display: inline-block;
                width: 30px;
                height: 30px;
                background: #428cf6;
                border-radius: 50%;
                margin-left: 27px;
                transition: transform 0.5s;

                &:first-child{
                    margin-left: 0;
                }

                &.current{
                    transform: scale(1.5);
                }

            }

        }
    }
</style>